<script lang='ts' setup>
import { ref, defineProps } from "vue";
import { encode, decode } from "js-base64"; // 直接使用即可
import router from "@/router";

const text = ref("");
const result = ref("");

/** 加密 */
function onEncode(): void {
  result.value = encode(text.value);
}
/** 解密 */
function onDecode(): void {
  result.value = decode(text.value);
}
function onExchange(): void {
  const resultTemp = result.value;
  result.value = text.value;
  text.value = resultTemp;
}
/** json 美化 */
function onJsonPretty(): void {
  router.push("/tools/json-pretty?text=" + encode(result.value));
}
</script>
<template>
  <div class="base64">
    <div class="title hr">Base64 在线加解密</div>
    <div class="box">
      <div class="sub-title">请输入要进行 Base64 编码或解码的字符</div>
      <t-textarea placeholder="请输入内容" :autosize="{ minRows: 5, maxRows: 10 }" v-model="text" />
    </div>
    <div class="btns flex-w">
      <t-button class="btn" :disabled="!text" @click="onEncode">编码 (Encode)</t-button>
      <t-button class="btn" :disabled="!text" @click="onDecode">解码 (Decode)</t-button>
      <t-button class="btn" :disabled="!text || !result" @click="onExchange">交换内容 (Exchange)</t-button>
      <t-button class="btn" @click="onJsonPretty">JSON 美化 (JSON pretty)</t-button>
    </div>
    <div class="box">
      <div class="sub-title">Base64 编码或解码的结果：</div>
      <t-textarea placeholder="请输入内容" :autosize="{ minRows: 5, maxRows: 10 }" v-model="result" />
    </div>
  </div>
</template>
<style lang='scss' scoped>
.base64 {
  padding: 40px;
  width: 100%;
  .title {
    font-size: 25px;
  }

  .box {
    margin: 10px 0;

    .sub-title {
      font-size: 14px;
      color: #666;
      margin-bottom: 10px;
    }
  }

  .btns {
    .btn {
      margin-right: 10px;
      margin-bottom: 10px;
    }
  }
}
</style>